<template>
  <div class="container">
    <div class="mui-card-header mui-card-media" @click="goAbnormal">
      <el-badge :value="3" class="item">
					<img src="../../assets/img/myIcons/error.png" width="34" height="34" />
				</el-badge> 
      
      <div class="mui-media-body">
        异常呼叫
        <p class="time">2017-03-25</p>
        <p>提报人:管理员,异常信息:陪不良</p>
      </div>
    </div>
    <div class="mui-card-header mui-card-media" @click="goLack">
      <el-badge :value="1" class="item">
					 <img src="../../assets/img/myIcons/material.png" width="34" height="34" />
				</el-badge> 
  
      <div class="mui-media-body">
        缺料呼叫
         <p class="time">2018-04-25</p>
        <p>提报人:saas07,缺料信息:CAB</p>
      </div>
    </div>
    <div class="mui-card-header mui-card-media" @click="goCall">
       <el-badge :value="2" class="item">
					  <img src="../../assets/img/myIcons/device.png" width="34" height="34" />
				</el-badge>
  
      <div class="mui-media-body">
        设备呼叫
         <p class="time">2019-05-25</p>
        <p>提报人:管理员,缺料信息:CAB</p>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {};
  },
  methods: {
    goAbnormal() {
      this.$router.push({ name: "abnormal" });
	},
	goLack(){
		 this.$router.push({ name: "lackResource" });
	},
	goCall(){
		 this.$router.push({ name: "callEquip" });
	}
  }
};
</script>

<style scoped>
	.mui-card-header.mui-card-media .mui-media-body{
		margin-left: 50px;
	}
	.mui-card-header.mui-card-media{
		padding-top: 20px;
	}
.container {
  position: relative;
	background: white;
}
.time {
  position: absolute;
  right: 10px;
  top: 10px;
}
.item {
  position: absolute;
  top: 20px;
  left: 10px;
}
</style>
